<template>
  <div>
    <el-form
      :inline="true"
      :model="form"
      size="small"
      class="searchForm bg-gray flex flex-wp flex-a-c"
    >
      <el-form-item label="代理商">
        <el-input v-model.trim="form.agent"></el-input>
      </el-form-item>
      <el-form-item label="关联订单号">
        <el-input v-model.trim="form.orderNo"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model.trim="form.phone"></el-input>
      </el-form-item>

      <el-form-item label="订单状态">
        <el-select v-model="form.orderStatus" placeholder="请选择">
          <el-option label="全部" value=""></el-option>
          <el-option
            v-for="(item, index) in auditStatusObj"
            :key="index"
            :label="item"
            :value="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分润状态">
        <el-select v-model="form.settleStatus" placeholder="请选择">
          <el-option label="全部" value=""></el-option>
          <el-option
            v-for="(item, index) in cashStatusObj"
            :key="index"
            :label="item"
            :value="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分润时间:">
        <el-date-picker
          v-model="rangeTime"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-button size="small" @click="search()">查询</el-button>
      <el-button icon="el-icon-search" size="small" @click="reset()"
        >重置</el-button
      >
      <el-button size="small" @click="exportExcel()"
        >导出</el-button
      >
    </el-form>
    <el-row :gutter="20">
      <!-- <el-col :span="7">
        <div class="grid-content bg-purple">
          订单总金额 {{formatNumber(orderObj.paymentMoney)}}
        </div>
      </el-col>
      <el-col :span="7">
        <div class="grid-content bg-purple-light">
          手续费总额 {{formatNumber(orderObj.feeMoney)}}
        </div>
      </el-col> -->
      <el-col :span="7">
        <div class="grid-content bg-purple-dark">
          分润总额 {{formatNumber(orderObj.incomeMoney)}}
        </div>
      </el-col>
    </el-row>
    <el-table
      border
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <!-- <el-table-column
        prop="addTime"
        label="提现时间"
        align="center"
        width="200"
      >
        <template slot-scope="scope">
          {{ new Date(scope.row.addTime).Format('YYYY-MM-DD hh:mm:ss') }}
        </template>
      </el-table-column> -->
      <el-table-column prop="orderNo" label="关联订单号" align="center">
      </el-table-column>
      <el-table-column prop="nickName" label="代理商" align="center">
      </el-table-column>
      <el-table-column prop="mercName" label="商户名称" align="center">
      </el-table-column>
      <el-table-column prop="mercNo" label="商户编号" align="center">
      </el-table-column>
      <el-table-column prop="phone" label="手机号" align="center">
      </el-table-column>

      <el-table-column
        prop="paymentMoney"
        label="订单金额(元)"
        align="center"
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="feeMoney"
        label="手续费(元)"
        align="center"
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="incomeMoney"
        label="分润金额(元)"
        align="center"
        width="150"
      >
      </el-table-column>
      <el-table-column prop="realname" label="订单状态" align="center">
        <template slot-scope="scope">
          {{ auditStatusObj[scope.row.orderStatus] }}
        </template>
      </el-table-column>
      <el-table-column prop="realname" label="分润状态" align="center">
        <template slot-scope="scope">
          {{ cashStatusObj[scope.row.settleStatus] }}
        </template>
      </el-table-column>
      <el-table-column
        prop="orderTime"
        label="订单时间"
        align="center"
        width="200"
      >
        <template slot-scope="scope">
          {{
            scope.row.orderTime
              ? new Date(scope.row.orderTime).Format("YYYY-MM-DD hh:mm:ss")
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="addTime"
        label="分润时间"
        align="center"
        width="200"
      >
        <template slot-scope="scope">
          {{
            scope.row.addTime
              ? new Date(scope.row.addTime).Format("YYYY-MM-DD hh:mm:ss")
              : ""
          }}
        </template>
      </el-table-column>
    </el-table>
    <div class="text-c margin-t-d">
      <el-pagination
        @current-change="getDataList"
        :current-page.sync="pageInfo.pageindex"
        :page-size="pageInfo.pagesize"
        background
        layout="total,prev, pager, next, jumper"
        :total="pageInfo.total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        agent: "",
        orderNo: '',
        phone: "",
        orderStatus: "",
        settleStatus: "",
      },
      rangeTime: [],
      qdForm: {},
      auditStatusObj: {
        1: "待支付",
        2: "支付完成",
        3: "订单取消",
      },
      cashStatusObj: {
        1: "在途",
        2: "分润成功",
        3: "取消分润",
      },
      auditData: {
        orderStatus: 1,
        auditOpinion: "",
        id: "",
      },
      pageInfo: {
        pagesize: 10,
        pageindex: 1,
        total: 0,
      }, //页码
      orderObj:{
        feeMoney: '',
        incomeMoney: '',
        paymentMoney: ''
      },
      tableData: [],
      auditVisible: false,
    };
  },
  beforeMount() {
    this.search();
  },
  methods: {
    reset() {
      this.form = {
        agent: "",
        orderNo: '',
        phone: "",
        orderStatus: "",
        settleStatus: "",
      };
      this.rangeTime = []
    },
    search() {
      this.qdForm = { ...this.form };
      this.qdForm.startTime =
        this.rangeTime && this.rangeTime[0]
          ? this.rangeTime[0].Format("YYYY-MM-DD hh:mm:ss")
          : "";
      this.qdForm.endTime =
        this.rangeTime && this.rangeTime[1]
          ? this.rangeTime[1].Format("YYYY-MM-DD 23:59:59")
          : "";
      this.pageInfo = {
        pagesize: 10,
        pageindex: 1,
        total: 0,
      };
      this.getDataList();
      this.getOrderStatistics()
    },
    // 获取统计数据
    getOrderStatistics(){
      let params = {
        agent:  this.qdForm.agent || undefined,
        orderNo:  this.qdForm.orderNo || undefined,
        orderStatus:  this.qdForm.orderStatus || undefined,
        phone:  this.qdForm.phone || undefined,
        settleStatus:  this.qdForm.settleStatus || undefined,
        startTime:  this.qdForm.startTime || undefined,
        endTime:  this.qdForm.endTime || undefined,
        pageNum:  this.pageInfo.pageindex,
        pageSize:  this.pageInfo.pagesize,
      };
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$ajax
        .getData("adm/income/count", params)
        .then((data) => {
          loading.close();
          this.orderObj = data.resData
        })
        .catch((error) => {
          loading.close();
          this.$message({
            message: error.codeDes || error.message,
            type: "error",
          });
        });
    },
    getDataList() {
      let params = {
        agent:  this.qdForm.agent || undefined,
        orderNo:  this.qdForm.orderNo || undefined,
        orderStatus:  this.qdForm.orderStatus || undefined,
        phone:  this.qdForm.phone || undefined,
        settleStatus:  this.qdForm.settleStatus || undefined,
        startTime:  this.qdForm.startTime || undefined,
        endTime:  this.qdForm.endTime || undefined,
        pageNum:  this.pageInfo.pageindex,
        pageSize:  this.pageInfo.pagesize,
      };
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$ajax
        .getData("adm/income/pageList", params)
        .then((data) => {
          loading.close();
          this.tableData = data.resData.data;
          this.pageInfo.total = data.resData.count;
        })
        .catch((error) => {
          loading.close();
          this.$message({
            message: error.codeDes || error.message,
            type: "error",
          });
        });
    }, //审核弹窗
    exportExcel() {
      this.qdForm = { ...this.form };
      this.qdForm.startTime =
        this.rangeTime && this.rangeTime[0]
          ? this.rangeTime[0].Format("YYYY-MM-DD hh:mm:ss")
          : "";
      this.qdForm.endTime =
        this.rangeTime && this.rangeTime[1]
          ? this.rangeTime[1].Format("YYYY-MM-DD 23:59:59")
          : "";
      let params = {
        agent:  this.qdForm.agent || undefined,
        orderNo:  this.qdForm.orderNo || undefined,
        orderStatus:  this.qdForm.orderStatus || undefined,
        phone:  this.qdForm.phone || undefined,
        settleStatus:  this.qdForm.settleStatus || undefined,
        startTime:  this.qdForm.startTime || undefined,
        endTime:  this.qdForm.endTime || undefined,
        pageNum:  this.pageInfo.pageindex,
        pageSize:  this.pageInfo.pagesize,
      };
      const loading = this.$loading({
        lock: true,
        text: "正在导出...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$ajax
        .getFileData("adm/income/export", params)
        .then((data) => {
          loading.close();
          // this.tableData = data.resData.data;
          // this.pageInfo.total = data.resData.count;
        })
        .catch((error) => {
          loading.close();
          this.$message({
            message: error.codeDes || error.message,
            type: "error",
          });
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    color: #fff;
    text-align: center;
    line-height: 50px;
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #58af5c;
  }
  .bg-purple {
    background: #458fe3;
  }
  .bg-purple-light {
    background: #ef7448;
  }
  .grid-content {
    border-radius: 4px;
    padding: 30px;
    font-size: 30px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>